Learn HTML - HTML horizontal rule

<!DOCTYPE html>
<html>
<body>
<h1>HEADING</h1>
<a href="#">LINK 1</a>
<a href="#">LINK 2</a>
<a href="#">LINK 3</a>
<a href="#">LINK 4</a>
<hr>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum tenetur necessitatibus quisquam, debitis dolor laboriosam atque numquam? Quos nulla dolores, impedit fuga tempore beatae hic at doloribus illo fugit eaque.</p>
</body>
</html>

Explanation:

<hr> creates a horizontal line across the width of its container.

It is a block-level element, meaning it takes up the full width available.

By default, it appears as a thin, gray, recessed line.

When to Use <hr>

The <hr> tag is commonly used in the following scenarios:

Separating different topics or sections within a document.

Creating visual breaks between elements.

Structuring long web pages into distinct sections.

Example: Separating Sections

<!DOCTYPE html>
<html>
<body>
<h2>Introduction</h2>
<p>This is the introduction to our topic.</p>
<hr>
<h2>Details</h2>
<p>This section contains more details about our topic.</p>
</body>
</html>

Styling the <hr> Tag with CSS

The default style of <hr> can be customized using CSS.

<!DOCTYPE html>
<html>
<head>
<style>
hr {
border: 0;
height: 3px;
background-color: black;
width: 50%;
}
</style>
</head>
<body>
<h2>Introduction</h2>
<p>This is the introduction to our topic.</p>
<hr>
<h2>Details</h2>
<p>This section contains more details about our topic.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
hr {
border: none;
border-top: 2px dotted gray;
}
</style>
</head>
<body>
<h2>Introduction</h2>
<p>This is the introduction to our topic.</p>
<hr>
<h2>Details</h2>
<p>This section contains more details about our topic.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
hr {
width: 50%;
margin: auto;
}
</style>
</head>
<body>
<h2>Introduction</h2>
<p>This is the introduction to our topic.</p>
<hr>
<h2>Details</h2>
<p>This section contains more details about our topic.</p>
</body>
</html>

Example using a `div` with a border instead of <hr>

<!DOCTYPE html>
<html>
<body>
<h2>Introduction</h2>
<p>This is the introduction to our topic.</p>
<div style="border-top: 2px solid black; width: 80%; margin: auto;"></div>
</body>
</html>

HTML Horizontal Rule

The <hr> tag in HTML is used to create a horizontal rule, which represents a thematic break between content sections. It is a self-closing tag, meaning it does not require an end tag.

Example

Explanation:

<hr> creates a horizontal line across the width of its container.

It is a block-level element, meaning it takes up the full width available.

By default, it appears as a thin, gray, recessed line.

When to Use <hr>

The <hr> tag is commonly used in the following scenarios:
Separating different topics or sections within a document.

Creating visual breaks between elements.

Structuring long web pages into distinct sections.

Example: Separating Sections

Styling the <hr> Tag with CSS

The default style of <hr> can be customized using CSS.

Example using a `div` with a border instead of <hr>

Best Practices

Use <hr> only when indicating a meaningful content break.

Use CSS for advanced styling instead of relying on the default browser appearance.

Avoid excessive <hr> usage to prevent visual clutter.

Consider using padding and margins for spacing instead of <hr> when possible.

*HTML Horizontal Rule*

The <hr> tag in HTML is used to create a horizontal rule, which represents a thematic break between content sections. It is a self-closing tag, meaning it does not require an end tag.

Example

Explanation:

<hr> creates a horizontal line across the width of its container. It is a block-level element, meaning it takes up the full width available. By default, it appears as a thin, gray, recessed line.

When to Use <hr>

The <hr> tag is commonly used in the following scenarios: Separating different topics or sections within a document. Creating visual breaks between elements. Structuring long web pages into distinct sections.

Example: Separating Sections

Styling the <hr> Tag with CSS

The default style of <hr> can be customized using CSS.

Example using a `div` with a border instead of <hr>

Best Practices

Use <hr> only when indicating a meaningful content break. Use CSS for advanced styling instead of relying on the default browser appearance. Avoid excessive <hr> usage to prevent visual clutter. Consider using padding and margins for spacing instead of <hr> when possible.

HTML Horizontal Rule

<hr> creates a horizontal line across the width of its container.

It is a block-level element, meaning it takes up the full width available.

By default, it appears as a thin, gray, recessed line.

The <hr> tag is commonly used in the following scenarios:
Separating different topics or sections within a document.

Creating visual breaks between elements.

Structuring long web pages into distinct sections.

Use <hr> only when indicating a meaningful content break.

Use CSS for advanced styling instead of relying on the default browser appearance.

Avoid excessive <hr> usage to prevent visual clutter.

Consider using padding and margins for spacing instead of <hr> when possible.